<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>类定义组件</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//使用ES6中的class定义一个组件
			class Hello extends React.Component{
				//render方法放在哪里的？ —— Hello的原型对象上，供实例去使用
				//render中的this是谁？ —— Hello类的实例对象 <=> Hello的实例对象 <=> Hello组件实例
				render(){
					console.log(this)//render中的this是Hello类的实例对象
					return <h2>我是用类定义的组件，适用于：【复杂组件的定义】</h2>
				}
			}
			//渲染组件到页面
			ReactDOM.render(<Hello/>,document.getElementById('test'))

			/* 
					执行了ReactDOM.render(<Hello/>.........后发生了什么？
							第一步：React解析组件标签，寻找Hello组件：
											(1).若找到了，则进行第二步
											(1).若未找到，则报错 Hello is not defined
							第二步：发现Hello组件是用类定义的，随后React帮我们new了一个Hello组件的实例：h
											并通过h调用到了Hello原型上的render方法，即：h.render()
											备注：此处的h只是我们分析问题时候的一个代号，React底层用的肯定不是h，是其他名
							第三步：将render调用返回的虚拟DOM渲染到页面
			
			*/

		</script>
	</body>
</html>